<template>
    <view class="pages fitment-pages">
        <view class="content">
            <location @search="search"></location>
            <quick-entrance></quick-entrance>
            <view class="active" @click="active">
                <view class="active-btn">
                    <u-button type="info" shape="circle" size="small" text="立刻领取" color="#CAA45A"></u-button>
                </view>
            </view>
            <text class="room">推荐好房</text>
            <house-list :house-list="houseList"></house-list>
            <view class="safe-area-inset-bottom"></view>
            <he-load-more v-if="list.length > 0" :status="loadStatus"></he-load-more>
            <he-no-content v-if="isNothing" text="暂未找到相关商品"></he-no-content>
            <bottom-navigation-bar></bottom-navigation-bar>
        </view>
    </view>
</template>

<script>
    import Location from './components/Location';
    import QuickEntrance from './components/QuickEntrance';
    import HouseList from './components/HouseList';
    import heNoContent from "../../../components/he-no-content.vue";
    import heLoadMore from "../../../components/he-load-more.vue";
    import bottomNavigationBar from "../../../components/bottom-navigation-bar";

	export default {
        components:{
            Location,
            QuickEntrance,
            HouseList,
            heLoadMore,
            heNoContent,
            bottomNavigationBar
        },
		data() {
            return {
                houseList: [],
                page: {
                    count: 1,
                    size: 10,
                    current: 1,
                },
                isNothing: false,
                loadStatus: "loadmore",
            }
		},
		onLoad() {
            this.getList();
		},
		methods: {
            getList(){
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/index' + uni.$u.queryParams({p: this.page.current})).then(res => {
                    uni.hideLoading();
                    this.houseList = res.data;
                    this.page.count = res.total;
                    this.page.current = res.current_page;
                    this.page.size = res.per_page;
                });
            },

            search(e){
                e.p = this.page.current;
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/search_house'  + uni.$u.queryParams(e)).then(res => {
                    uni.hideLoading();
                    this.houseList = res;
                    this.page.count = res.total;
                    this.page.current = res.current_page;
                    this.page.size = res.per_page;
                });
            },

            active(){
                uni.navigateTo({url: '/pages/user/active/invite'});
            },

		},
        onReachBottom() {
            if (this.page.count > this.page.current) {
                this.page.current++;
                this.loadStatus = "loading";

                uni.$u.http.get('/api.php/UserClinet/index' + uni.$u.queryParams({p: this.page.current})).then(res => {
                    uni.hideLoading();
                    for (let i = 0; i < res.data.length; i++) {
                        this.houseList.push(res.data[i]);
                    }

                    this.page.count = res.total;
                    this.page.current = res.current_page;
                    this.page.size = res.per_page;
                    this.loadStatus = "loadmore"
                });

            } else {
                this.loadStatus = "nomore";
            }
        },
	}
</script>

<style lang="scss" scoped>
    .pages {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }
    .content{
        padding: 20rpx;
    }

    .room {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 20rpx;
    }
    .active{
        width: 100%;
        height: 160rpx;
        @include flex;
        background-image: url('https://sy-k.cn/static/admin/images/ax2.png');
        background-size: contain;
        background-repeat: no-repeat;

        align-items: center;
        flex-direction: row-reverse;
        .active-btn{
            padding-right: 40rpx;
        }
    }
</style>
